import React, { Component } from 'react';
import {
    View, Text, StyleSheet, Image, Dimensions
} from 'react-native';

import ICONS from '../util/icons';
import { scaleSize, scaleFontSize } from '../util/size';
import icons from '../util/icons';

const {width, height} = Dimensions.get('window');

export default class VersionView extends Component{

    render() {
        return (
            <View style={{
                display: 'flex',
                alignItems: 'center',
                // justifyContent: 'center',
                backgroundColor: '#FFFFFF',
                height: height,
            }}>
                <View style={{
                    display: 'flex',
                    flexDirection: 'column',
                    // justifyContent: 'center'
                    alignItems: 'center',
                    // justifyContent: 'space-between',
                    marginTop: scaleSize(scaleSize(157)),
                    width: scaleSize(323),

                }}>
                    <View>
                        <Image style={{width: scaleSize(114) , height: scaleSize(119)}} source={icons.logo} />
                    </View>

                    <View style={{
                        marginTop: scaleSize(47),
                    }}>
                        <Text style={{
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: scaleSize(12),
                            color: '#AFAFAF',
                            textAlign: 'center',
                        }}>V0.1</Text>
                    </View>

                    <View style={{
                        display: 'flex',
                        width: scaleSize(323),
                        justifyContent: 'center',
                        alignItems: 'center',
                        marginTop: scaleSize(27),
                    }}>
                        <Text style={{
                            fontFamily: 'PingFangSC-Light',
                            fontSize: scaleFontSize(12),
                            color: '#666666',
                            lineHeight: scaleSize(20)
                        }}>
                        本 App 是基于 CoinXp 交易公链的数字货币交易 APP 。 您可以用来查看数字货币行情，进行个人数字资产管理，买卖数字货币资产。
                        </Text>
                    </View>
                    

                    <View style={{
                        width: scaleSize(323),
                        display: 'flex',
                        flexDirection: 'row',
                        justifyContent: 'space-around',
                        marginTop: scaleSize(100),
                    }}>
                        <Image style={styles.socialIcon} source={ICONS.twitter}/>
                        <Image style={styles.socialIcon} source={ICONS.linkedin}/>
                        <Image style={styles.socialIcon} source={ICONS.twitter}/>
                        <Image style={styles.socialIcon} source={ICONS.telegram}/>
                    </View>
                    <View style={{
                        marginTop: scaleSize(40),
                        // alignItems: 'flex-end',
                        justifyContent: 'flex-end',
                    }}>
                        <Text style={{
                            textAlign:'center',
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: scaleSize(12),
                            color: '#9B9B9B',
                        }}>Copyright © 2018</Text>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    logo: {

    },
    socialIcon: {
        height: scaleSize(30),
        width: scaleSize(30),
    },

})